<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="test"></div>

    <!-- 引入核心库 -->
    <script type="text/javascript" src="./React-js/16.8/react.development.js"></script>
    <!-- 用于支持react操作DOM -->
    <script text="text/javascript" src="./React-js/16.8/react-dom.development.js"></script>
    <!-- 用于将jsx转换为js -->
    <script text="text/javascript" src="./React-js/16.8/babel.min.js"></script>

    <script type="text/babel">
        const data = ['抽烟','喝酒','烫头']
        const obj = {name1:'抽烟',name2:'喝酒',name3:'烫头'}
        const myData = 'HELLO'
        const VDOM = (
            <div>
                <h1>爱好</h1>
                <ul>
                   {
                    // data   // 直接使用数组，会自动遍历
                    // obj     // 对象，会报错
                    data.map((item,i)=><li key={i}>{item}</li>)
                   }
                </ul>
            </div>

        )
        // 渲染虚拟DOM到页面（后面的会替换之前）
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>

</html>